<!--ljx 2022.9.1 测试页面  -->
<template>
	<div class=''>
		<el-row :gutter="20">
			<el-col :span="2" />
			<el-col :span="20">
				<el-carousel height="250px">
					<el-carousel-item v-for="item in imgs">
						<h3 class="small justify-center" text="2xl"><img :src="item" style="width: 100%;height: 250px;">
						</h3>
					</el-carousel-item>
				</el-carousel>
			</el-col>
			<el-col :span="2" />
		</el-row>
		<el-row :gutter="20">
			<el-col :span="2" />
			<el-col :span="20">
				<div class="title-wrap">
					<div style="float: left;display: flex;">
						<div style="margin-left: 20px;font-size: 20px;">
							商城中心
						</div>
						<div style="margin-left: 20px;margin-top: 4px;">
							香蕉<b>|</b> 猕猴桃<b>|</b>橙/橘<b>|</b>芒果<b>|</b>火龙果
						</div>
					</div>
					<div style="float: right;margin-right: 20px;margin-top: 4px;">
						更多+
					</div>

				</div>

			</el-col>
			<el-col :span="2" />
		</el-row>
		<el-row :gutter="20">
			<el-col :span="2" />
			<el-col v-for="(item, index) in myGoodsList_center" :span="5">
				<el-card :body-style="{ padding: '0px' }">
					<router-link :to="{name:'indexcontent',query:{id:item.id}}"><img :src="item.img"
							style="width: 90%;" /></router-link>
					<div style="padding: 4px">
						<span>{{item.title}}</span>
						<div style="color: red;padding-top: 4px;">
							¥{{item.price}}
						</div>
					</div>
				</el-card>
			</el-col>
			<el-col :span="2" />
		</el-row>
		<el-row :gutter="20">
			<el-col :span="2" />
			<el-col :span="20">
				<div class="title-wrap">
					<div style="float: left;display: flex;">
						<div style="margin-left: 20px;font-size: 20px;">
							热销商品
						</div>
						<div style="margin-left: 20px;margin-top: 4px;">
							香蕉<b>|</b> 猕猴桃<b>|</b>橙/橘<b>|</b>芒果<b>|</b>火龙果
						</div>
					</div>
					<div style="float: right;margin-right: 20px;margin-top: 4px;">
						更多+
					</div>

				</div>

			</el-col>
			<el-col :span="2" />
		</el-row>
		<el-row :gutter="20">
			<el-col :span="2" />
			<el-col :span="5">
				<myleft></myleft>
			</el-col>
			<el-col :span="15">
				<div style="display: flex;flex-wrap: wrap;">
					<el-card shadow="hover" :body-style="{ padding: '4px' }" v-for="(item, index) in myGoodsList_hot"
						style="width: 246px;height: 270px;margin-left: 10px;margin-top: 10px">
						<router-link :to="{name:'indexcontent',query:{id:item.id}}"><img :src="item.img"
								style="width: 90%;" /></router-link>
						<div style="padding: 4px">
							<span>{{item.title}}</span>
							<div style="color: red;padding-top: 4px;">
								¥{{item.price}}
							</div>
						</div>
					</el-card>
				</div>
			</el-col>
			<el-col :span="2" />
		</el-row>
	</div>
</template>

<script>
	//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
	//例如：import 《组件名称》 from '《组件路径》';
	import myleft from '../components/myleft.vue'
	export default {
		data() {
			//这里存放数据
			return {
				msg: '测试数据',
				listname: '苹果列表',
				activeIndex: '1',
				imgs: ['/b1.jpg', '/b2.jpg', '/b3.jpg', '/b4.jpg'],
				myGoodsList_center: [],
				myGoodsList_hot: [],

			};
		},
		//import引入的组件需要注入到对象中才能使用
		components: {
			myleft
		},
		//监听属性 类似于data概念
		computed: {},
		//监控data中的数据变化
		watch: {},
		//方法集合
		methods: {
			frun() {
				alert('我是老大');
			},
			mygetdata_center() {
				// console.log(11)
				let myparams = {
					goodtype: this.$route.query.goodtype
				};
				console.log('myparams:', myparams);
				this.getdata('/system/goodtable/list?pageNum=1&pageSize=4', myparams).then(response => {
					this.myGoodsList_center.splice(0, this.myGoodsList_center.length); //清空数组

					for (var index in response.rows) {
						let newgood = {
							id: response.rows[index],
							img: "/a1.jpg",
							title: "测试",
							describe: "新产品",
							price: 121,
							num: 3,
							memo: '无'
						};

						response.rows[index].img = 'http://localhost/dev-api' + response.rows[index].img;
						newgood.id = response.rows[index].id;
						newgood.img = response.rows[index].img;
						newgood.title = response.rows[index].title;
						newgood.describe = response.rows[index].mydescribe;
						newgood.price = response.rows[index].price;
						newgood.num = response.rows[index].num;
						newgood.memo = response.rows[index].memo;
						this.myGoodsList_center.push(newgood);
					}

				}).catch((err) => {
					console.log('err')
				})
			},
			mygetdata_hot() {
				// console.log(11)
				let myparams = {
					goodtype: this.$route.query.goodtype
				};
				console.log('myparams:', myparams);
				this.getdata('/system/goodtable/list?pageNum=1&pageSize=9', myparams).then(response => {
					this.myGoodsList_hot.splice(0, this.myGoodsList_hot.length); //清空数组

					for (var index in response.rows) {
						let newgood = {
							id: response.rows[index],
							img: "/a1.jpg",
							title: "测试",
							describe: "新产品",
							price: 121,
							num: 3,
							memo: '无'
						};

						response.rows[index].img = 'http://localhost/dev-api' + response.rows[index].img;
						newgood.id = response.rows[index].id;
						newgood.img = response.rows[index].img;
						newgood.title = response.rows[index].title;
						newgood.describe = response.rows[index].mydescribe;
						newgood.price = response.rows[index].price;
						newgood.num = response.rows[index].num;
						newgood.memo = response.rows[index].memo;
						this.myGoodsList_hot.push(newgood);
					}

				}).catch((err) => {
					console.log('err')
				})
			},
		},
		//生命周期 - 创建完成（可以访问当前this实例）
		created() {

		},
		//生命周期 - 挂载完成（可以访问DOM元素）
		mounted() {
			this.mygetdata_center();
			this.mygetdata_hot();
		},
		beforeCreate() {}, //生命周期 - 创建之前
		beforeMount() {}, //生命周期 - 挂载之前
		beforeUpdate() {}, //生命周期 - 更新之前
		updated() {}, //生命周期 - 更新之后
		beforeDestroy() {}, //生命周期 - 销毁之前
		destroyed() {}, //生命周期 - 销毁完成
		activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
	}
</script>
<style scoped>

</style>
